<template lang="html">
    <swiper :options="swiperOption" ref="mySwiper" class="clear_fixed">
      <swiper-slide v-for="(item, index) of datas" :key='index'>
        <div class="weather_content" style="position:relative">
          <p>{{ item.date }}</p>
          <p>一股妖风:{{ item.fengli.split('[')[2].split(']')[0] }}</p>
          <p>妖风来头:{{ item.fengxiang }}</p>
          <p>温度:{{ item.low.split(' ')[1] }} ~ {{ item.high.split(' ')[1] }}</p>
          <p>{{ item.type }}</p>
          <img class="type_img" src="../../static/img/duoyun.jpg" v-if="item.type=='多云'" alt="">
          <img class="type_img" src="../../static/img/qing.jpg" v-else-if="item.type=='晴'" alt="">
          <img class="type_img" src="../../static/img/yintian.jpg" v-if="item.type=='阴'" alt="">
          <!-- <img class="type_img" src="../../static/img/weather.jpg" v-if="item.type=='多云'" alt=""> -->
        </div>
      </swiper-slide>
    </swiper>

</template>

<script>
import axios from 'axios'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data(){
    return{
      datas:'',
      date:'',
      swiperOption:{
        notNextTick:true,
        direction:"horizontal",
        effect:"coverflow",
        setWrapperSize :true
      }
    }
  },
  created(){
    axios.get("http://wthrcdn.etouch.cn/weather_mini?city=北京").then((content)=>{
      this.datas = content.data.data.forecast;
      console.log(this.datas);
    })
  }
  ,components: {
  swiper,
  swiperSlide
 },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
}
</script>

<style lang="css" scoped>
.swiper-slide{
  float:left;
  /*background:rgba(27, 170, 232, .4);*/
  color: white;
}
.clear_fixed:after{
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
}
.weather_content p{
  font-size: 2rem;
  line-height: 3rem;
}
.weather_content p:first-child{
  padding-top: 2rem;
}
.weather_content p:last-of-type{
  padding-bottom: 2rem;
}
.type_img{
  position:absolute;
  top:0;
  left:0;
  z-index:-999;
  width:100%;
  height:100%;
}
</style>
